import { View, CommonEvent, Input, Text } from '@tarojs/components'
import { MutableRefObject, useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import '../../../images/public/style.css'
import styles from './index.module.scss'

interface LgSearchProps {
  type?: 'A' | 'B'
  placeholder?: string
  value?: string
  onConfirm?: (value: string | object, event?: CommonEvent) => void
  onInput?: (value: string | object, event?: CommonEvent) => void
  onFocus?: (event?: CommonEvent) => void
  onBlur?: (event?: CommonEvent) => void
  onClose?: (event?: CommonEvent) => void
  searchList?: object[] | string[]
  searchAttr?: string
  choSearchItem?: (value: string | object) => void
  imageAttr?: string
  closeBtnName?: string
  className?: string
  style?: string | object
  focus?: boolean
  ref?: MutableRefObject<any>
  autoFocus?: boolean
}

export default function LgSearch(props: LgSearchProps) {
  const type = props.type || 'A'
  const [showBInput, setShowB] = useState(type == 'A')
  const [value, setVal] = useState(props.value || '')
  const [focus, setfocus] = useState(false)
  const [propsFocus, setPropsFoucus] = useState(false)

  const { value: keywords } = props
  const onFocus = () => {
    setfocus(true)
    props.onFocus && props.onFocus()
  }
  const onBlur = () => {
    setfocus(false)
    props.onBlur && props.onBlur()
  }
  const onInput = e => {
    let { value } = e.detail
    setVal(value)
    props.onInput && props.onInput(value)
  }
  const onConfirm = () => {
    props.onConfirm && props.onConfirm(value)
  }
  const clearInput = () => {
    setVal('')
    props.onConfirm && props.onConfirm('')
    props.onClose && props.onClose()
  }

  const hidecloseBtnName = () => {
    setShowB(false)
  }
  const handShowBInput = () => {
    if (type == 'B' && !showBInput) {
      setShowB(true)
    }
  }
  const formatSearchText = text => {
    if (!text) return ''
    let index = text.indexOf(value)
    if (index == -1) return text
    let headText = text.substr(0, index)
    let endText = text.substr(index + value.length)
    return (
      <Text>
        {headText}
        <Text style='color: #0090ff;'>{value}</Text>
        {endText}
      </Text>
    )
  }

  const choSearchItem = e => {
    let index = e.currentTarget.dataset.index
    let choData = props.searchList ? props.searchList[index] : ''
    setVal(props.searchAttr ? choData[props.searchAttr] : choData)
    props.choSearchItem && props.choSearchItem(choData)
  }

  useEffect(() => {
    setTimeout(() => {
      if (props.focus) {
        setPropsFoucus(props.focus)
      }
    }, 200)
  }, [props])

  useEffect(() => {
    setVal(keywords || '')
  }, [keywords])

  const rootClass = styles[`lg_search_warp_${type}`]
  const showClass = showBInput && type == 'B' ? styles['lg_search_warp_B_show'] : ''
  const propsClass = props.className || ''

  return (
    <View className={`${rootClass} ${showClass} ${propsClass}`} style={props.style || ''}>
      <View className={styles['lg_search']} onClick={handShowBInput}>
        <View
          className={`${styles['search_icon']}  ${focus ? styles['search_icon_focus'] : ''}`}
          onClick={onConfirm}
        />
        <Input
          className={styles['search_input']}
          type='text'
          placeholderClass='search_input_placeholder'
          confirmType='search'
          placeholder={props.placeholder || '输入文字检索'}
          value={showBInput ? value : '搜索'}
          onFocus={onFocus}
          onBlur={onBlur}
          ref={props.ref}
          onInput={onInput}
          onConfirm={onConfirm}
          focus={props.focus}
          // autoFocus={props?.autoFocus}
        />
        <View
          className={styles['lg_search_dele_btn']}
          style={`display:${showBInput && value ? 'block' : 'none'}`}
          onClick={clearInput}
        >
          <View className={`icon-b01701 ${styles['icon-b01701']}`} />
        </View>
      </View>
      {props.type && props.type == 'B' ? (
        <View className={styles['lg_search_close_btn']} onClick={hidecloseBtnName}>
          {props.closeBtnName || '取消'}
        </View>
      ) : null}
      <View
        className={styles['lg_search_list']}
        style={`height: ${
          showBInput && props.searchList && props.searchList.length
            ? Taro.pxTransform(props.searchList.length * 100)
            : '0'
        }`}
      >
        {props.searchList
          ? props.searchList.map((o, i) => {
              return (
                <View
                  key={'search_i' + i}
                  className={styles['lg_search_item oneline']}
                  data-index={i}
                  onClick={choSearchItem}
                >
                  {props.imageAttr ? <View className={styles['lg_search_i_image']} /> : null}
                  {formatSearchText(props.searchAttr ? o[props.searchAttr] : o)}
                </View>
              )
            })
          : null}
      </View>
    </View>
  )
}
